<template>
  <section class="panel-box home-wrapper">
    <!-- 上层 -->
    <section class="top-wrapper">
      <!-- 左边部分 -->
      <div class="sider-box left-box">
        <div class="item-box">
          <p class="item-title">全口径供电可靠性</p>
          <div class="item-content">
            <Electricity
              :list="electricityData.data"
              :id="electricityData.id"
            ></Electricity>
          </div>
        </div>
        <div class="item-box">
          <p class="item-title">全口径平均停电时间</p>
          <div class="item-content">
            <power-cut
              :list="powercutData.data"
              :id="powercutData.id"
            ></power-cut>
          </div>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="middle-box" style="overflow: auto">
        <s-map />
      </div>
      <!-- 右边部分 -->
      <div class="sider-box right-box">
        <!-- 机房运行总览  -->
        <div class="item-box" style="overflow: hidden">
          <p class="item-title">故障排修</p>
          <div class="item-content">
            <Ring :list="breakdownData.data" :id="breakdownData.id"></Ring>
          </div>
        </div>
        <div class="item-box" style="overflow: hidden">
          <p class="item-title">配网异常</p>
          <div class="item-content">
            <barEcharts id="barChart1" :echartsData="barDeviceData" />
          </div>
        </div>
      </div>
    </section>
    <!-- 下层 -->
    <section class="bottom-wrapper">
      <!-- 左边部分 -->
      <div class="sider-box left-box">
        <div class="item-box">
          <p class="item-title">停电时户执行比例</p>
          <div class="item-content">
            <s-progress :listData="progressData" />
          </div>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="middle-box">
        <p class="item-title">总运检类投诉</p>
        <div class="item-content">
          <lineBarEcharts
            id="lineBarChart1"
            :echartsData="lineBarEchartsData"
          />
        </div>
      </div>
      <!-- 右边部分 -->
      <div class="sider-box right-box">
        <!-- 机房运行总览  -->
        <div class="item-box" style="overflow: hidden">
          <p class="item-title">投诉事件</p>
          <div class="item-content">
            <s-table :tableData="tableDatas" />
          </div>
        </div>
      </div>
    </section>
  </section>
</template>

<script>
import lineBarEcharts from "@/components/echarts/lineBar.vue";
import barEcharts from "@/components/echarts/bar.vue";
import sProgress from "@/components/lists/progress.vue";
import sTable from "@/components/lists/tableList.vue";
import sMap from "@/components/map/map.vue";
import Ring from "@/components/echarts/ring";
import Electricity from "@/components/lists/electricity";
import PowerCut from "@/components/lists/powerCut";
export default {
  name: "Home",
  components: {
    barEcharts,
    lineBarEcharts,
    sProgress,
    sTable,
    sMap,
    Ring,
    Electricity,
    PowerCut,
  },
  data() {
    return {
      timer:null,
      echartsDemoData: {
        dataUnit: null,
        axisData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        seriesData: [
          { name: "峰用电", data: [30.0, 20, 30, 24, 48, 39, 40] },
          { name: "平用电", data: [30, 33, 30, 22, 24, 26, 26] },
          { name: "谷用电", data: [30, 20, 13, 20, 23, 25, 20] },
          { name: "实际用电量", data: [100, 110, 150, 80, 90, 135, 110] },
          { name: "预计用电量", data: [120, 120, 160, 90, 100, 155, 120] },
        ],
      },

      barDeviceData: {
        ataUnit: null,
        stack: 1,
        legend: true,
        color: ["#2A63E3", "#23A2DB"],
        axisData: [
          "成都公司",
          "眉山公司",
          "凉山公司",
          "甘孜公司",
          "德阳公司",
          "绵阳公司",
          "资阳公司",
        ],
        seriesData: [
          { name: "重过载", data: [22, 28, 32, 44, 47, 59, 59], stack: "1" },
          { name: "低电压", data: [25, 25, 32, 44, 47, 59, 59], stack: "1" },
        ],
      },
      lineBarEchartsData: {
        dataUnit: null,
        axisData: ["频繁停电", "低电压", "停送电", "电网建设"],
        color: ["#2481E0", "#16B397", "#60A721", "#DEB820"],
        seriesData: [
          {
            name: "成都",
            data: [90, 40, 21, 21],
            seiresType: "bar",
          },
          {
            name: "天府",
            data: [50, 25, 30, 64],
            seiresType: "bar",
          },
          {
            name: "绵阳",
            data: [60, 65, 13, 52],
            seiresType: "bar",
          },
          {
            name: "甘孜",
            data: [77, 12, 150, 90],
            seiresType: "bar",
          },
          {
            name: "预计用电量",
            data: [120, 120, 160, 90],
            lineGradient: true,
            gradientColor: ["rgba(45,113,174,.6)", "rgba(11,28,68,.3)"],
            seiresType: "line",
          },
        ],
      },
      progressData: [
        {
          title: "甘孜公司",
          color: ["#1E3865", "#F64646"],
          num: 308.45,
          precent: 90,
        },
        {
          title: "阿坝公司",
          color: ["#1E3865", "#F38107"],
          num: 226.97,
          precent: 80,
        },
        {
          title: "广安公司",
          color: ["#1E3865", "#F1E00C"],
          num: 166.87,
          precent: 70,
        },
        {
          title: "眉山公司",
          color: ["#1E3865", "#06A2F6"],
          num: 145.45,
          precent: 60,
        },
        {
          title: "资阳公司",
          color: ["#1E3865", "#0B94E6"],
          num: 138.97,
          precent: 50,
        },
        {
          title: "德阳公司",
          color: ["#1E3865", "#0B94E6"],
          num: 126.87,
          precent: 40,
        },
      ],
      tableDatas: [
        {
          name: "国网南充公司",
          content: "电压质量长时间异常",
          time: "2021-09-20 20:04:22",
        },
        {
          name: "国网甘孜公司",
          content: "频繁停电",
          time: "2021-09-19 15:04:22",
        },
        {
          name: "国网凉山公司",
          content: "频繁停电",
          time: "2021-09-04 17:34:42",
        },
        {
          name: "国网资阳公司",
          content: "停电时间超长",
          time: "2021-09-22 21:04:02",
        },
        {
          name: "国网泸州公司",
          content: "频繁停电",
          time: "2021-09-20 20:04:22",
        },
        {
          name: "国网眉山公司",
          content: "电压质量长时间异常",
          time: "2021-09-11 20:04:22",
        },
        {
          name: "国网绵阳公司",
          content: "频繁停电",
          time: "2021-09-20 20:04:22",
        },
        {
          name: "国网广安公司",
          content: "电压质量长时间异常",
          time: "2021-09-11 20:04:22",
        },
      ],
      breakdownData: {
        data: {
          list: [
            { value: 2204, name: "高压故障" },
            { value: 2217, name: "低压故障" },
            { value: 1353, name: "电能质量" },
            { value: 1217, name: "计量故障" },
          ],
          mark: [
            {
              name: "故障保修单",
              x: "50%",
              y: "50%",
              value: 269,
            },
          ],
          color: ["#6E2CEB", "#24A9E3", "#09CF70", "#DFAF3B"],
        },
        id: "breakdown",
      },
      electricityData: {
        data: {
          avg: [
            {
              value: 99.8023,
            },
          ],
          one: [
            {
              value: 99.9492,
              name: "城网",
            },
          ],
          two: [
            {
              value: 99.7812,
              name: "城网",
            },
          ],
        },
        id: "electricity",
      },
      powercutData: {
        data: [
          {
            title: "城网",
            time: 2.9647,
          },
          {
            title: "农网",
            time: 12.761,
          },
          {
            title: "预安排停电",
            time: 5.1769,
          },
          {
            title: "故障停电",
            time: 12.761,
          },
        ],
        id: "powercut",
      },
    };
  },
  computed: {},
  mounted() {
    this.timer = setInterval(this.dataChange, 2 * 1000);
  },
  created() {},

  methods: {
    dataChange() {
      this.powercutData.data.forEach((el) => {
        el.time = parseFloat((el.time + 0.0002).toFixed(5));
      });
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss">
// 宽度变量
$topMiddelWidth: 50%;
$siderMargin: 10px;
$siderWidth: calc((100% - #{$topMiddelWidth}) / 2 - 2 * #{$siderMargin});
$bottomLeftWidth: calc(100% - #{$siderWidth} - 2 * #{$siderMargin});
$bottomLeftItemWidth: calc(#{$bottomLeftWidth} - 2 * #{$siderMargin});
// 高度变量
// $siderHeight:10px;
$topMiddleHeight: calc(66% - 2 * #{$siderMargin});
$siderHeight: calc((100% - #{$siderMargin}) / 2);
// 公用样式类
.sider-box {
  width: $siderWidth;
}
// 主要样式
.home-wrapper {
  height: calc(100vh - 60px);
  width: 100%;
  // background: url("../../assets/images/homeBg.png") no-repeat;
  background: #092047;
  background-size: 100% 100%;
  overflow: auto;
  .item-title {
    text-align: left;
    // margin:2.5% 0 0 10%;
    margin: 10px 0 0 50px;
    font-weight: bold;
    letter-spacing: 1px;
  }
  .item-content {
    margin-top: 10px;
    height: calc(100% - 40px);
  }
  .top-wrapper {
    display: flex;
    height: $topMiddleHeight;
    margin: $siderMargin 0;
    // 两侧的部分
    .sider-box {
      @extend .sider-box;
      .item-box {
        height: $siderHeight;
        margin-bottom: $siderMargin;
        background: url("../../assets/images/boxBg-1.png") no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        &:last-child {
          margin: 0;
        }
      }
    }
    .left-box {
      margin-right: auto;
      margin-left: $siderMargin;
    }
    .right-box {
      margin-left: auto;
      margin-right: $siderMargin;
    }
    // 左边部分
    // 中间部分
    .middle-box {
      width: $topMiddelWidth;
      border: 1px solid #2163ab;
      position: relative;
    }
  }
  .bottom-wrapper {
    display: flex;
    height: 33%;
    .sider-box {
      @extend .sider-box;
      margin-left: auto;
      margin-right: $siderMargin;
      background: url("../../assets/images/boxBg-1.png") no-repeat;
      background-size: 100% 100%;
      .item-box {
        height: 100%;
      }
    }
    .middle-box {
      width: $topMiddelWidth;
      background: url("../../assets/images/boxBg-2.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
    }
  }
}
</style>